---
import TopTabTitle from "./TopTabTitle.astro";
import TopTabContent from "./TopTabContent.astro";
import ArrowBtn from "./ArrowBtn.astro";
import searchEngines from "@/config/searchEngines";
---

<!-- 搜索框 -->
<div class="w-screen h-screen relative text-center z-[1] mb-4">
    <div class="flex items-center px-4 mt-[5%]">
        <div class="relative w-full top-28 mx-auto">
            <div
                class="relative overflow-hidden w-8/12 max-lg:w-10/12 mx-auto my-0 mb-2"
            >
                <ul
                    class="flex items-center text-nowrap px-4 text-sm font-medium text-center"
                    id="search-tab-title"
                    data-tabs-toggle="#search-tab"
                    data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-purple-500 dark:hover:text-purple-500 border-purple-600 dark:border-purple-500"
                    data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
                    role="tablist"
                >
                    {
                        searchEngines.map((item) => (
                            <TopTabTitle title={item.typeName} id={item.type} />
                        ))
                    }
                </ul>
            </div>
            <form class="flex justify-center">
                <div class="flex relative z-10 w-8/12 max-lg:w-10/12">
                    <div class="relative w-full">
                        <input
                            type="search"
                            id="search-inout"
                            class="block p-4 w-full z-20 text-base text-gray-900 bg-gray-50 rounded-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
                            placeholder="请输搜索关键词"
                            required
                        />
                        <button
                            type="submit"
                            id="search-btn"
                            class="absolute top-0 end-0 p-4 h-full text-sm font-medium text-slate-700 dark:text-white opacity-60 hover:opacity-100"
                        >
                            <svg
                                class="w-4 h-4"
                                aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 20 20"
                            >
                                <path
                                    stroke="currentColor"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
                                ></path>
                            </svg>
                            <span class="sr-only">Search</span>
                        </button>
                    </div>
                </div>
            </form>
            <div
                class="relative overflow-hidden w-8/12 max-lg:w-10/12 mx-auto my-0 mb-2"
            >
                <ul id="search-tab" class="flex items-center">
                    {
                        searchEngines.map((item) => (
                            <TopTabContent id={item.type}>
                                {item.engines.map((eng, index) => (
                                    <ArrowBtn
                                        btnName={eng.name}
                                        btnType={
                                            index == 0
                                                ? item.type +
                                                  "-" +
                                                  eng.type +
                                                  " active"
                                                : item.type + "-" + eng.type
                                        }
                                        dataUrl={eng.url}
                                        dataDescription={eng.description}
                                        dataLogo={eng.logo}
                                        dataHomePage={eng.homepage}
                                        dataPlaceholder={eng.placeholder}
                                        dataHot={eng.hot}
                                    />
                                ))}
                                "
                            </TopTabContent>
                        ))
                    }
                </ul>
            </div>

            <div
                class="relative bottom-16 w-8/12 p-4 mx-auto my-0 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
                role="alert"
            >
                <span class="font-medium" id="eng-info">Danger alert!</span> 
            </div>
        </div>
    </div>
</div>

<script>
    import { initBannerSlider } from "@components/common/slide.js";
    initBannerSlider("search-tab-title");
    initBannerSlider("search-tab");
</script>

<!-- Tab 切换事件监听 -->
<script>

    document.addEventListener("DOMContentLoaded", () => {
        const tabs = document.querySelectorAll(
            '[data-tabs-toggle] button[role="tab"]',
        );
        const arrowTabs = document.querySelectorAll(".btn");
        const searchInput = document.querySelector("#search-inout");
        const searchBtn = document.querySelector("#search-btn");
        const engInfo=document.querySelector("#eng-info");
        let activeTab = null;
        let activeBtn = null;
        let engData={};
        tabs.forEach((tab) => {
            tab.addEventListener("click", (event) => {
                const targetTabId =event.currentTarget.getAttribute("data-tabs-target");
                const targetTab = document.querySelector(targetTabId);
              const activeBr=  targetTab.querySelectorAll(".active")[0];
              setEngData(activeBr);
            });
        });

        arrowTabs.forEach((btn) => {
            btn.addEventListener("click", (event) => {
                removeActiveClass(btn);
                setEngData(btn);
            });
        });

        function setEngData(targetDom) {
            engData = {
                url: targetDom.getAttribute("data-url"),
                description: targetDom.getAttribute("data-description"),
                logo: targetDom.getAttribute("data-logo"),
                homePage: targetDom.getAttribute("data-homepage"),
                placeholder: targetDom.getAttribute("data-placeholder"),
                hot: targetDom.getAttribute("data-hot")==="true"?true:false,
            };
            searchInput.placeholder=engData.placeholder;
            engInfo.textContent=engData.description;
        }

        searchBtn.addEventListener("click", (event) => {
            if (engData.url) {
                window.open(engData.url.replace('{keyword}', encodeURIComponent(searchInput.value)));
            } else {
                alert("请先选择搜索引擎");
            }
        });

    });
    //每个分类下默认第一个激活
    //移除当前tabContent下所有按钮得active
    //给当前按钮添加active
    function removeActiveClass(activeTab) {
        //获取activeTab的同胞节点
        const buttons = Array.from(activeTab.parentNode.children);
        buttons.forEach((button) => {
            if (button?.classList.contains("active")) {
                button.classList.remove("active");
            }
        });
        activeTab.classList.add("active");
    }
</script>
